<template>
    <div :style="styleColor">
        <div class="top">
            <div class="left">
                <img class="imgOne" src="@/assets/images/bigViewIMG/blue.png" alt="">
                <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
                <span>报关情况</span>
            </div>
        </div>
        <div id="customsSituationMap" ref="customsSituationMap" style=" width:100%;height:185px"></div>
        <!-- 报关情况 -->
    </div>

</template>

<script>

import echarts from 'echarts'
import { mapGetters } from 'vuex'
export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data() {
        return {
            options: {},
            monthList: null,
            sumList: null,
            sumList1: null,
            eDW:'',
            iDW:''
        }
    },
   
    computed: {
        ...mapGetters(['customsList']),
        transStyle() {
           
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    watch: {
        customsList: {
            deep: true,
            handler(val) {

                this.getList(val)
            }
        },
        monthList: {
            deep: true,
            handler(val) {
                this.setOptions(val, this.sumList, this.sumList1,this.eDW,this.iDW)
            }
        },
        sumList: {
            deep: true,
            handler(val) {
                this.setOptions(this.monthList, val, this.sumList1,this.eDW,this.iDW)
            }
        }
    },
    created() {
      
    },
    mounted() {
        this.options = this.value
        this.$nextTick(() => {
            this.initChart();
        });
    },
    methods: {
        async getList(data) {
            //   if(data[0]) {
            //         this.DW=data[0].countTotal.slice(-1)
            // }

            const monthList = data.map(item => {
                return item.month
            })
            let newMonthList = Array.from(new Set(monthList))
            // 出口 金额
            const expList = data.filter(item => {
                return item.ieFlag == 'E'

            })
            this.eDW=expList[0].countTotal?expList[0].countTotal.slice(-1):expList[1].countTotal.slice(-1)
            const count1List = expList.map(item => {
                if (!item.countTotal) {
                    return 0
                } else {
                    return +item.countTotal.slice(0,-1)
                }
            })
            // 进口金额
            const impList = data.filter(item => {
                return item.ieFlag == 'I'

            })
            this.iDW=impList[0].countTotal?impList[0].countTotal.slice(-1):impList[1].countTotal.slice(-1)
            const count1List1 = impList.map(item => {
                if (!item.countTotal) {
                    return 0
                } else {
                    return +item.countTotal.slice(0,-1)
                }
            })

            this.sumList1 = count1List1

            this.monthList = newMonthList
            this.sumList = count1List
            this.chart.hideLoading();
        
        },

        initChart() {
            this.chart = echarts.init(document.getElementById('customsSituationMap'), null, { renderer: 'canvas' })
            this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions(this.monthList, this.sumList, this.sumList1);
        },
        setOptions(aList, bList, cList,eDW,iDW) {
           
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: aList.length > 0 || bList.length > 0 || cList.length > 0,   // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                backgroundColor: "",
                color: ['#FFC25C','#FD666D'],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                     formatter:function(params){
                       let str=params[0].axisValue+'<br />'
                       params.forEach(item=>{
                        if(item.seriesName=='进口'){
                            str+=`${item.seriesName}: ${item.data}${iDW}<br />`
                        }else {
                            str+=`${item.seriesName}: ${item.data}${eDW}<br />`
                        }
                       })
                        return str
                    }
                },
                legend: {
                    data: ["进口", "出口"],
                    // align: "right",
                    // right: 20,
                    textStyle: {
                        color: "#fff",
                    },
                    itemWidth: 20,
                    itemHeight: 10,
                    itemGap: 20,
                },
                grid: {
                    top:'20%',
                    left: "3%",
                    right: "6%",
                    bottom: "1%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        name:'',
                        nameGap:1,
                        // nameLocation:'middle',
                        nameTextStyle:{
                            color:'#fff'
                        },
                        type: "category",
                        data: aList,
                        boundaryGap: false,
                 
                     
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                            },
                           
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: '单位：'+iDW+'(进口)',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#fff",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#063374",
                               
                            },
                        },
                        axisLabel: {
                           
                        }
                    },
                      {
                        type: "value",
                        name: '单位：'+eDW+'(出口)',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#fff",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#063374",
                               
                            },
                        },
                        axisLabel: {
                           
                        }
                    },
                ],
                series: [
                   
                    {
                        name: "进口",
                        type: "line",
                        data: cList,
                        
                        symbolSize: 0,
                        symbol: 'circle',
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 0
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: "0.5",
                            }
                        },
                     
                    },
                     {
                        name: "出口",
                        type: "line",
                        data: bList,
                        symbol: 'circle',
                        symbolSize: 0,
                        yAxisIndex:1,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 0
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: "0.6",
                            }
                        },
                        
                    },

                ],
            });
        }
    }

};
</script>

<style scoped lang="scss">
// ::-webkit-scrollbar {
//    width: 0;
//    height: 0;
//    color: transparent;
//  }
.top {
    height: 40px;
    display: flex;

    .left {
        width: 420px;
        display: flex;
        align-items: center;

        .imgOne {
            width: 35px;
            height: 40px;
        }

        .imgTwo {
            width: 22px;
            height: 21px;
            margin-left: 10px;
        }

        span {
            color: #fff;
            font-size: 16px;
            margin-left: 8px;
        }
    }


}
</style>


